<template>
  <div>
    <Breadcrumb :style="{margin: '16px 0'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>学校管理</BreadcrumbItem>
      <BreadcrumbItem>添加学校</BreadcrumbItem>
    </Breadcrumb>
    <Card>
      <div style="min-height: 600px">
        <Row>
          <Col span="10" offset="7">
            <Form :model="school" :label-width="100" ref="school" :rules="schoolRules" size="large">
              <FormItem label="学校名称" prop="name">
                <Input type="text" v-model="school.name" placeholder="请输入学校名称" />
              </FormItem>
              <FormItem label="起止时间" required>
                <DatePicker
                  :value="school.daterange"
                  :options="rangeOption"
                  :clearable="rangeClear"
                  format="yyyy-MM-dd"
                  type="daterange"
                  placement="bottom-end"
                  placeholder="请选择开始时间"
                ></DatePicker>
              </FormItem>
              <FormItem label="所在地区" required>
                <Cascader
                  :data="data"
                  v-model="school.address"
                  @on-change="cascaderChange"
                  :clearable="clearable"
                ></Cascader>
              </FormItem>
              <FormItem label="学校联系人" prop="contactName">
                <Input type="text" v-model="school.contactName" placeholder="请输入联系人姓名" />
              </FormItem>
              <FormItem label="学校联系电话" prop="contact">
                <Input type="number" v-model="school.contact" placeholder="请输入联系方式" />
              </FormItem>
              <FormItem label="是否试用" prop="isTrial">
                <RadioGroup v-model="school.isTrial">
                  <Radio label="1">是</Radio>
                  <Radio label="0">否</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="激活码数量">
                <Input type="number" v-model="school.cdkeyCount" placeholder="激活码数量" />
              </FormItem>
              <FormItem label="老师账号">
                <div class="teacher-list" v-for="(item, index) in school.teacherList" :key="index" style="margin-bottom:15px;">
                  <Row>
                    <Col span="8">
                      <Input type="text" v-model="item.teacherAccount" placeholder="教师账号"></Input>
                    </Col>
                    <Col span="5" offset="1">
                      <Select v-model="item.levelId">
                        <Option label="人音小学" value="1"></Option>
                        <Option label="人音初中" value="2"></Option>
                        <Option label="人教小学" value="3"></Option>
                        <Option label="人教初中" value="4"></Option>
                      </Select>
                    </Col>
                    <Col span="5" offset="1">
                      <Input type="text" v-model="item.teacherNickName" placeholder="教师姓名"></Input>
                    </Col>
                    <Col span="3" offset="1">
                      <Button @click="removeTeacherItem(index)">删除</Button>
                    </Col>
                  </Row>
                </div>
                <Button @click="addTeacherItem" icon="md-add">添加</Button>
              </FormItem>
              <Divider></Divider>
              <FormItem>
                <Button type="primary" size="large" @click="handleSubmit('school')">提交</Button>
              </FormItem>
            </Form>
          </Col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
import qs from "qs";
import citylist from "~/static/citylist.json";
export default {
  data() {
    return {
      school: {
        name: "",
        daterange: [],
        cdkeyCount: "",
        contact: "",
        contactName: "",
        isTrial: "0",
        address: ["11", "01", "01"],
        areaName: "北京市北京市东城区",
        teacherList: [
        ]
      },
      radioIsDisabled: true,
      rangeOption: {
        shortcuts: [
          {
            text: "1周",
            value() {
              const start = new Date();
              const end = new Date();
              end.setTime(start.getTime() + 3600 * 24 * 7 * 1000);
              return [start, end];
            }
          },
          {
            text: "30天",
            value() {
              const start = new Date();
              const end = new Date();
              end.setTime(start.getTime() + 3600 * 24 * 30 * 1000);
              return [start, end];
            }
          },
          {
            text: "90天",
            value() {
              const start = new Date();
              const end = new Date();
              end.setTime(start.getTime() + 3600 * 24 * 90 * 1000);
              return [start, end];
            }
          },
          {
            text: "180天",
            value() {
              const start = new Date();
              const end = new Date();
              end.setTime(start.getTime() + 3600 * 24 * 180 * 1000);
              return [start, end];
            }
          },
          {
            text: "1年",
            value() {
              const start = new Date();
              const end = new Date();
              end.setTime(start.getTime() + 3600 * 24 * 365 * 1000);
              return [start, end];
            }
          }
        ]
      },
      schoolRules: {
        name: [
          {
            required: true,
            message: "请输入学校名称，不能为空。",
            trigger: "blur"
          }
        ],
        contact: [
          {
            required: true,
            message: "联系方式不能为空。",
            trigger: "blur"
          }
        ],
        contactName: [
          {
            required: true,
            message: "联系人姓名不能为空。",
            trigger: "blur"
          }
        ],
        isTrial: [
          {
            required: true
          }
        ]
      },
      rangeClear: false,
      clearable: false,
      data: citylist.data
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        const opearId = localStorage.getItem("userId");
        let teacherlist = '';
        this.school.teacherList.map(item => {
          if (item.teacherAccount !== '' && item.teacherNickName !== '') {
            teacherlist += ',' + item.levelId + '-' + item.teacherAccount + '-' + item.teacherNickName
          }
        })
        try {
          teacherlist = teacherlist.substr(1, teacherlist.length)
        } catch(err) {}
        if (valid) {
          // const start = this.school.daterange
          this.$axios
            .post(
              "/bm/opera/school/addSchool",
              qs.stringify({
                name: this.school.name,
                startTime: this.school.daterange[0].getTime(),
                endTime: this.school.daterange[1].getTime(),
                cdkeyCount: this.school.cdkeyCount,
                contact: this.school.contact,
                contactName: this.school.contactName,
                isTrial: this.school.isTrial,
                operaId: opearId,
                proviceCode: this.school.address[0],
                cityCode: this.school.address[1],
                countryCode: this.school.address[2],
                areaName: this.school.areaName,
                userList: teacherlist
              })
            )
            .then(res => {
              console.log(res)
              if (res.data.code == 200) {
                this.$Modal.confirm({
                  title: "添加学校成功",
                  content: "点击“返回”返回学校列表<br/>点击“继续”添加新学校",
                  okText: "继续",
                  cancelText: "返回",
                  onOk: () => {
                    const start = new Date();
                    const end = new Date();
                    end.setTime(start.getTime() + 3600 * 24 * 365 * 1000);
                    this.school = {
                      name: "",
                      daterange: [start, end],
                      cdkeyCount: "",
                      contact: "",
                      contactName: "",
                      isTrial: "0",
                      address: ["11", "01", "01"],
                      areaName: "北京市北京市东城区",
                      teacherList: []
                    }
                  },
                  onCancel: () => {
                    this.$router.replace("/school");
                  }
                });
              }
            });
        }
      });
    },
    cascaderChange(value, selectData) {
      console.log(value, selectData);
      this.school.areaName = selectData.map(item => item.label).join('-');
      console.log(this.school.areaName)
    },
    addTeacherItem() {
      this.school.teacherList.push(
        {
          levelId: '1',
          teacherAccount: '',
          teacherNickName: ''
        }
      )
    },
    removeTeacherItem(n) {
      console.log(n)
      this.school.teacherList.splice(n, 1)
    }
  },
  mounted: function() {
    const start = new Date();
    const end = new Date();
    end.setTime(start.getTime() + 3600 * 24 * 365 * 1000);
    this.school.daterange = [start, end];
  }
};
</script>
